<script setup lang="ts">
defineOptions({
  name: "TotalElectricity"
});
import { ref, reactive, onMounted, computed, markRaw, provide } from "vue";
import { queryTotalElectricityStatistics } from "@/api/modules/operation";
import totalElectricityDetail from "@/views/electricity/operation/overview/components/totalElectricityDetail.vue";
import modelBox from "@/views/common/components/modelBox/index.vue";
import echartsChart from "@/views/common/components/echartsChart/index.vue";
import { useLabelLayoutBarChartFn } from "@/hooks/useEcharts";
import ICON from "@/assets/svg/common/echarts.svg?component";

interface Props {
  data?: Array<any> | null;
  dark?: boolean;
}
const isShowDetail = ref<boolean>(false);
// 总用电量统计
const totalElectricityRef = ref<InstanceType<typeof echartsChart> | null>(null);
const totalElectricityTitle = ref<string>("总用电量统计");
const totalElectricityOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const totalElectricityInit = async () => {
  const res = await queryTotalElectricityStatistics(null, () => totalElectricityRef.value.loadingInstance.close());
  if (!res?.length) return;
  const ec = await totalElectricityRef.value.getEcharts();
  const unit = res[0].unit || "kWh";
  const xAxisData = res.map(item => item.usedDay);
  const fabData = res.map(item => item.fabUsedValue);
  const deviceData = res.map(item => item.deviceUsedValue);
  const allUsedData = res.map(item => item.allUsedValue);
  const label = {
    show: true,
    position: "top",
    formatter(params) {
      const { dataIndex = 0 } = params;
      if (typeof dataIndex !== "number") return "";
      const { allUsedValue = 0 } = res[dataIndex];
      if (typeof allUsedValue !== "number") return "";
      return allUsedValue;
    }
  };
  const legend = {
    show: true,
    right: 0
  };
  const tooltip: any = {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  };
  const xAxis = [
    {
      type: "category",
      data: xAxisData,
      axisLabel: {
        interval: 0
      }
    }
  ];
  const series: Array<any> = [
    {
      name: "总电量",
      type: "line",
      label: { show: false },
      symbol: "circle",
      symbolSize: 8,
      emphasis: { focus: "series" },
      data: allUsedData,
      itemStyle: {
        color: "#FFD360" //#FFCA45FF
      }
    },
    {
      name: "机台用电",
      type: "bar",
      stack: "Ad",
      emphasis: { focus: "series" },
      data: fabData,
      barWidth: 22,
      itemStyle: {
        color: "#4C9CFF" //#3B82F6FF
      }
    },
    {
      name: "厂务用电",
      type: "bar",
      stack: "Ad",
      emphasis: { focus: "series" },
      data: deviceData,
      barWidth: 22,
      itemStyle: {
        color: "#34D399" //#28D892
      }
    }
  ];
  const ag = { legend, tooltip, xAxis, series };
  totalElectricityOptions.value = useLabelLayoutBarChartFn(ec, xAxisData, fabData, totalElectricityTitle.value, unit, null, false, "top", ag);
  totalElectricityRef.value.loadingInstance.close();
};
const clickHandler = () => {
  isShowDetail.value = true;
};
onMounted(() => {
  totalElectricityRef.value.initLoading();
  totalElectricityInit();
});
</script>

<template>
  <modelBox :title="totalElectricityTitle">
    <echartsChart ref="totalElectricityRef" :options="totalElectricityOptions" />
    <template #title>
      <component :is="markRaw(ICON)" class="chart-icon" @click="clickHandler" />
    </template>
  </modelBox>
  <totalElectricityDetail v-if="isShowDetail" v-model="isShowDetail" title="今日总用电量统计" />
</template>

<style lang="scss" scoped>
.px-icon {
  color: var(--px-color-primary);
}

.chart-icon {
  width: 16px;
  height: 16px;
  color: var(--px-color-primary);
  cursor: pointer;
}
</style>
